<template>
  <div class="system">
    <el-dialog @closed="handleClose" :visible.sync="visible">
      <div class="panelWrap">
        <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
          <div>{{ isEdit ? '修改平台' : '添加平台' }}</div>
          <i class="el-icon-close" @click="handleCloseDialogUpdate" />
        </div>

        <div class="flex flex-wrap">
          <div class="tree-grow m-r-80">
            <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
              <div>设备</div>
            </div>
            <div class="sysTree">
              <el-tree ref="tree" class="left-tree coTree" :current-node-key="0" :data="setTree" :props="defaultProps" :node-key="NODE_KEY" :default-expanded-keys="[1]" :show-checkbox="true" :highlight-current="true" :default-checked-keys="[0]" @check="handleCheck" @check-change="handleCheckChange" check-strictly />
            </div>
          </div>

          <div class="system-main m-r-80">
            <el-form :show-message="false" :rules="rules" ref="form" class="system-form m-t-40 flex flexdc" :model="form" label-width="auto">
              <!-- <el-form-item v-if="!isEdit" label="系统平台ID">
                    <el-input v-model="form.sysId" class="sysName " placeholder="请输入系统Id..." />
                  </el-form-item> -->
              <el-form-item prop="companyId" class="sys-nameBox flex flexac m-b-20">
                <span class="sysName m-r-20"><span class="mustval">*</span>厂家ID：</span>
                <el-input :value="companyName" class="com-input" readonly @input="handleValueChange" />
                <div>
                  <el-button type="warning" class="comp-select m-l-20 iconfont icon-xuanze" @click="handleSelect(0)">选择厂家</el-button>
                </div>
              </el-form-item>

              <el-form-item prop="equipmentId" class="sys-nameBox flex flexac m-b-20">
                <span class="sysName m-r-20"><span class="mustval">*</span>设备ID：</span>
                <el-input :value="equipmentName" class="com-input" readonly @input="handleValueChange" />
                <div>
                  <el-button type="warning" class="comp-select m-l-20 iconfont icon-xuanze" @click="handleSelect(1)">选择设备</el-button>
                </div>
              </el-form-item>

              <!-- <div class="sys-nameBox flex flexac m-b-20 m-l-10">
                <span class="sysName m-l-20"><span class="mustval">*</span>类型ID：</span>
                <el-select v-model="form.isWechat" class="isWechat-select coInput" placeholder="请选择是否需要绑定微信">
                  <el-option label="需要" value="1" />
                  <el-option label="不需要" value="0" />
                </el-select>
              </div> -->

              <!-- <div class="system-entry m-t-20">
                <span class="entry"><span class="mustval">*</span>工序：</span>
                <el-input v-model="form.sysEntry" class="entry-input coLogoInput" placeholder="请输入系统入口地址..." />
              </div> -->

              <!-- <div class="sys-nameBox flex flexac m-b-20 m-l-35">
                <span class="sysName m-l-20"><span class="mustval">*</span>ID：</span>
                <el-select v-model="form.isWechat" class="isWechat-select coInput" placeholder="请选择是否需要绑定微信">
                  <el-option label="需要" value="1" />
                  <el-option label="不需要" value="0" />
                </el-select>
              </div> -->

              <el-form-item prop="nature" class="sys-nameBox flex flexac m-b-20">
                <span class="sysName m-r-20"><span class="mustval">*</span>性质：</span>
                <el-select @change="handleNature" v-model="form.nature" class="isWechat-select coInput" placeholder="请选择产品性质">
                  <el-option label="成品" value="成品" />
                  <el-option label="半成品" value="半成品" />
                  <el-option label="采购件" value="采购件" />
                </el-select>
              </el-form-item>

              <el-form-item prop="category" v-if="form.nature === '成品'" class="sys-nameBox flex flexac m-b-20">
                <span class="sysName m-r-20"><span class="mustval">*</span>类别：</span>
                <el-select v-model="form.category" class="isWechat-select coInput" placeholder="请选择产品类别">
                  <el-option label="广告屏" :value="1" />
                  <el-option label="黑匣子" :value="2" />
                </el-select>
              </el-form-item>

              <el-form-item prop="parentId" class="sys-nameBox flex flexac m-b-20">
                <span class="sysName m-r-20"><span class="mustval">*</span>母件ID：</span>
                <el-input readonly v-model="form.parentId" class="com-input" placeholder="母件ID" />
              </el-form-item>

              <el-form-item class="sys-nameBox flex flexac">
                <span class="sysName m-r-20">备注：</span>
                <el-input v-model="form.remark" class="com-input" placeholder="请输入备注..." />
              </el-form-item>
            </el-form>

            <div class="flex flexac flextc footer m-t-40 m-l-90 m-b-40">
              <el-button v-if="!isEdit" class="btn saveBtn m-r-20 el-icon-circle-check" @click="handleSave">保 存</el-button>
              <el-button v-else class="btn m-r-20 el-icon-circle-check" type="success" @click="handleUpdate">更 新</el-button>
              <el-button class="btn clsoeBtn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
            </div>
          </div>
        </div>

      </div>
    </el-dialog>
    <pubSelect v-model="coSelectVisible" :select-type="selectType" :title="selectTitle" @update="handleSelectUpdate" />
  </div>
</template>

<script>
import { fetchProList } from '@/api/operation/BOM/opBomProduct'
import { transData } from '@/utils/toolclass'
import { createProAdd } from '@/api/operation/BOM/opBomProduct'
import pubSelect from '@/components/pubSelect/index'
import { updateProArticle } from '@/api/operation/BOM/opBomProduct'
import { showNotice } from '@/utils/toolclass'

export default {
  name: 'System',
  components: { pubSelect },
  props: {
    list: Array,
    value: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      equipmentName:'',
      companyName:'',
      rules: {
        companyId: [{ required: true, message: '请选择厂家ID', trigger: 'change' }],
        equipmentId: [{ required: true, message: '请选择设备ID', trigger: 'change' }],
        nature: [{ required: true, message: '请选择产品性质', trigger: 'change' }],
        parentId: [{ required: true, message: '请选择母件ID', trigger: 'change' }],
        category: [{ required: true, message: '请选择类别', trigger: 'change' }]
      },
      checkedValve: '',
      setTree: [], // tree数据
      defaultProps: {// 默认设置
        children: 'children',
        label: 'equipmentName'
      },
      NODE_KEY: 'id', // id对应字段
      selectTitle: '',
      selectType: 0, //弹窗类型 0=厂家 1=设备
      coSelectVisible: false,
      visible: false,
      dataList: [],
      formOrigin: {
        category: '',
        companyId: 0,
        equipmentId: 0,
        nature: '',
        parentId: 0,
        remark: '',
        typeId: 0,
        version: 1,
        workproc: ''
      },
      form: { ...this.data },
      url: require('@/assets/error.png')
    }
  },
  watch: {
    list(v) {
      this.transPro();
    },
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      if (this.form.id === 0) {
        this.form = { ...this.formOrigin }
      }
      this.visible = v
    },
    data(v) {
      if (v.id === 0) {
        this.form = { ...this.formOrigin }
      } else {
        this.form = { ...v }
      }
    }
  },
  mounted() {
    this.transPro()
  },
  methods: {
    // 自定义错误弹窗
    customValid(field){
      let arr = [];
      for(let item in field){
        arr.push(item)
      }
      showNotice('error','提示',field[arr[0]][0].message)
    },
    handleClose() {
      this.$refs.form.resetFields();
      this.equipmentName = '';
      this.companyName = '';
    },
    transPro() {
      const params = {
        pageIndex: 1,
        pageSize: 10
      }
      fetchProList(params).then(res => {
        // this.allDate = res.data
        this.setTree = transData(res.data, 'id', 'parentId')
        // this.platData = res.data.map(item => item)
      })
    },
    handleNature(val) {
      if (val === "成品") {
        this.form.parentId = 0;
      } else {
        this.form.parentId = '';
        this.form.category = '';
      }
    },
    handleCheck(data, checked) {
      if (checked.checkedKeys.length > 0) {
        this.$refs.tree.setCheckedKeys([data.id])
        this.form.parentId = data.id
      } else {
        this.form.parentId = ''
      }
    },
    handleCheckChange(data) {

    },
    // 查询所有厂家弹窗
    handleSelect(type) {
      this.coSelectVisible = true
      this.selectType = type
      switch (type) {
        case 0:
          this.selectTitle = '厂家'
          break
        case 1:
          this.selectTitle = '设备'
          break
        default:
          break
      }
    },
    // 厂家信息更新回调
    handleSelectUpdate(row) {
      switch (this.selectType) {
        case 0:
          // this.form.name = row.name
          this.form.companyId = row.id
          this.companyName = row.name
          break
        case 1:
          this.form.equipmentId = row.id
          this.equipmentName = row.name
          break
        default:
          break
      }
      console.log(this.form)
      // this.handleValueChange(row.id)
    },
    // 根据公司获取公司能够使用的系统
    handleValueChange(companyId) {
      fetchSystemCompanyId(companyId).then(res => {
        this.form.sysIdList = res.data
        this.checkSysiId = res.data[0].sysId
        this.handleChangeOrg(this.checkSysiId)
      })
    },
    handleUpdate() {
      this.$refs.form.validate((valid,field) => {
        if (valid) {
          const params = {
            category: this.form.category,
            orgId: this.form.orgId,
            companyId: this.form.companyId,
            equipmentId: this.form.equipmentId,
            id: this.form.id,
            nature: this.form.nature,
            parentId: this.form.parentId,
            remark: this.form.remark,
            typeId: this.form.typeId,
            version: this.form.version,
            workproc: this.form.workproc
          }
          updateProArticle(params).then((res) => {
            if (res.code === '000000') {
              showNotice('success', '提示', '保存成功!')
              this.$emit('handleRefresh')
              this.$emit('handleCloseDialog')
            }
          })
        } else {
          this.customValid(field)
        }
      })

    },
    handleCloseDialog() {
      console.log('子组件关闭')
      this.$emit('handleCloseDialog')
    },
    handleCloseDialogUpdate() {
      this.$emit('handleRefresh')
      this.$emit('handleCloseDialog')
    },
    handleSave() {
      this.$refs.form.validate((valid,field) => {
        if (valid) {
          this.handleCreateAdd(this.form)
        } else {
          this.customValid(field)
        }
      })
    },
    // }
    handleRefresh() {
      this.refresh = true
      setTimeout(() => {
        this.refresh = false
      }, 1200)
    },
    handleCreateAdd(data) {
      console.log(this.form)
      data.orgId = JSON.parse(this.$storage.get('userInfo')).orgList[0].id
      createProAdd(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '保存成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          showNotice('warning', '提示', res.msg)
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
@import "@/styles/public.scss";
::v-deep .el-form-item__content {
  display: flex;
}
.sysName {
  width: 85px;
  text-align: right;
}
.com-input {
  flex: 1;
}
::v-deep .el-tree-node .el-checkbox .el-checkbox__inner {
  display: block !important;
}
.flex-wrap {
  justify-content: space-around;
  padding: 15px 10px;
}
.tree-grow {
  width: 100%;
}
.system {
  height: 100%;
  .panelWrap {
    width: 800px;
    margin-left: -140px;
    background: #ffffff;
    .system-main {
      .system-form {
        .coInput {
          width: 240px;
        }
        .coLogoInput {
          width: 360px;
        }
        .sys-nameBox {
          .sysName {
          }
          .sysName-input {
          }
        }
        .shorterForm {
          .short-name {
          }
          .short-input {
          }
        }
        .sysPlatform {
          .platform-name {
          }
          .platform-select {
          }
        }
        .sysWechat {
          .isWechat {
          }
          .isWechat-select {
          }
        }
        .preview {
          .preview-text {
            vertical-align: top;
          }
          .editLogo {
            border: 1px solid rgba(225, 225, 225, 0.5);
            width: 240px;
            height: 150px;
            border-radius: 5px;
            .image-slot {
              width: 100%;
              height: 100%;
              border-radius: 5px;
              background: #eeeeee;
              .errorImg {
                width: 60px;
                height: 60px;
                margin: 40px 0 0 90px;
              }
            }
          }
        }
        .system-logo {
          margin-left: 140px;
          .log {
          }
          .logo-input {
          }
        }
        .system-entry {
          margin-left: 130px;
          .entry {
          }
          .entry-input {
          }
        }
      }
      .footer {
        .btn {
          width: 100px;
          height: 40px;
        }
      }
    }
  }
}
// .panelWrap {
//   .el-form {
//     margin: 0 auto;
//   }
//   .input {
//     justify-content: center;
//   }
//   .input1 {
//     margin-left: -120px;
//   }
//   .input2 {
//     margin-left: -60px;
//   }
//   .name {
//     width: 102px;
//   }
//   .sysName {
//     width: 194px;
//   }
//   .sysWechat {
//     width: 100%;
//     .isWechat {
//       width: 130px;
//       margin-left: -8px;
//     }
//   }
//   .entry {
//     width: 200px;
//   }
//   .sysLink {
//     width: 400px;
//   }
// .clsoeBtn,.saveBtn {
//   width: 100px;
//   height: 40px;
// }
// .el-button+.el-button {
//   margin-left: 30px;
// }
// .errorBox {
//   width: 100%;
//   height: 100%;
//   border-radius: 5px;
//   background: #eeeeee;
//   .errorImg {
//     width: 60px;
//     height: 60px;
//     margin: 45px 0 0 70px;
//   }
// }
// .editLogo {
//     border: 1px solid rgba(225,225,225,.5);
//     width: 200px;
//     height: 150px;
//     border-radius: 5px;
//   }
// }
</style>
